সিএসএস গ্রিড হল একটি 2D লেআউট সিস্টেম, যা ওয়েব পেজের উপাদানগুলোকে সারি (rows) এবং কলাম (columns)-এ সাজানোর জন্য ব্যবহৃত হয়। এটি ফ্লেক্সবক্সের মতো একমাত্র দিকের (1D) লেআউট সিস্টেম নয়; বরং গ্রিড একসাথে সারি এবং কলামের মাধ্যমে জটিল লেআউট ডিজাইন করতে পারে। গ্রিড সিস্টেম ব্যবহার করে লেআউট ডিজাইন আরও সহজ, সুনির্দিষ্ট এবং ডাইনামিক করা যায়।

সিএসএস গ্রিডের মৌলিক ধারণা

গ্রিড কন্টেইনার (Grid Container)

গ্রিড কন্টেইনার সেই উপাদান যা display: grid; প্রোপার্টি ব্যবহার করে গ্রিড লেআউট তৈরি করে।

.container {
  display: grid;
}

গ্রিড আইটেম (Grid Items)

গ্রিড কন্টেইনারের প্রতিটি চাইল্ড উপাদানকে গ্রিড আইটেম বলা হয়।

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

সিএসএস গ্রিডের প্রোপার্টি

গ্রিড টেমপ্লেট কলাম (grid-template-columns) এবং গ্রিড টেমপ্লেট সারি (grid-template-rows)

গ্রিড কন্টেইনারের কলাম এবং সারির আকার নির্ধারণ করতে ব্যবহৃত হয়।

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* তিনটি কলাম */
  grid-template-rows: 100px 150px; /* দুটি সারি */
}

গ্রিড গ্যাপ (grid-gap)

গ্রিড আইটেমগুলোর মধ্যে ফাঁকা নির্ধারণ করতে ব্যবহৃত হয়।

.container {
  display: grid;
  grid-gap: 10px;
}

গ্রিড লাইন (Grid Lines)

গ্রিড লাইনের সাহায্যে গ্রিড আইটেমগুলোর পজিশন নির্ধারণ করা যায়।

.item {
  grid-column: 1 / 3; /* প্রথম থেকে তৃতীয় কলাম পর্যন্ত */
  grid-row: 1 / 2; /* প্রথম সারি */
}

গ্রিড প্রোপার্টির উদাহরণ

অটো-ফিট এবং অটো-ফিল

গ্রিড কন্টেইনারে আইটেমগুলো ডাইনামিকলি অ্যাডজাস্ট করতে repeat() এবং auto-fit বা auto-fill ব্যবহার করা হয়।

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 20px;
}

ফ্র্যাকশনাল ইউনিট (fr)

fr ইউনিট ব্যবহার করে গ্রিডের প্রস্থ নির্ধারণ করা যায়।

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* কলামগুলোর প্রস্থের অনুপাত */
}

গ্রিড আইটেম পজিশনিং

grid-area

গ্রিড আইটেমকে নির্দিষ্ট এলাকায় স্থাপন করতে ব্যবহৃত হয়।

.item {
  grid-area: 1 / 2 / 2 / 4; /* row-start / column-start / row-end / column-end */
}

grid-template-areas

গ্রিড লেআউটকে আরও সুসংগঠিত করতে grid-template-areas ব্যবহার করা হয়।

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

রেস্পন্সিভ ডিজাইন এবং গ্রিড

গ্রিড সহজেই রেস্পন্সিভ ডিজাইনে ব্যবহার করা যায়। উদাহরণস্বরূপ:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

গ্রিড বনাম ফ্লেক্সবক্স (Flexbox)

বাস্তব উদাহরণ

সাধারণ গ্রিড লেআউট

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main main"
      "footer footer footer";
    grid-gap: 10px;
  }

  .header {
    grid-area: header;
  }

  .sidebar {
    grid-area: sidebar;
  }

  .main {
    grid-area: main;
  }

  .footer {
    grid-area: footer;
  }
</style>

কার্ড লেআউট

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

<style>
  .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 15px;
  }

  .card {
    background: #f5f5f5;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

কেন সিএসএস গ্রিড ব্যবহার করবেন?

• জটিল লেআউট সহজতর: বড় এবং জটিল লেআউট তৈরি করতে গ্রিড অনেক কার্যকর।
• ডাইনামিক ডিজাইন: রেস্পন্সিভ লেআউট তৈরি করতে সহজ।
• কোড সাশ্রয়ী: কম কোডে উন্নত লেআউট ডিজাইন সম্ভব।